<template>
  <div class="FromGood">
    <el-form
      :model="goodFrom"
      :rules="ruleGood"
      ref="goodFrom"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="门店名称" prop="name">
        <el-col :span="5">
          <el-input
            v-model="goodFrom.storeName"
            placeholder="请输入门店名称"
            size="medium"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="门店图片" prop="goodsImage">
        <el-upload
          :action="baseurl + '/upload'"
          list-type="picture-card"
          multiple
          :limit="1"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="uploadSuccess"
          :file-list="fileList"
          :on-exceed="message"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="goodFrom.storeImage" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item v-show="false" label="门店图片" prop="name">
        <el-col :span="5">
          <el-input
            v-model="goodFrom.storeImage"
            placeholder="请输入图片链接"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="门店电话" prop="name">
        <el-col :span="5">
          <el-input
            v-model="goodFrom.storePhone"
            placeholder="请输入门店电话"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="门店地址" prop="name">
        <el-col :span="5">
          <el-input
            v-model="goodFrom.storeAddress"
            placeholder="请输入门店地址"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="经度" prop="name">
        <el-col :span="5">
          <el-input
            v-model="goodFrom.storeLng"
            placeholder="请输入经度"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="维度" prop="name">
        <el-col :span="5">
          <el-input
            v-model="goodFrom.storeLat"
            placeholder="请输入维度"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="运营时间" prop="name">
        <el-col :span="5">
          <el-input
            v-model="goodFrom.busineHours"
            placeholder="请输入营业时间(例：9:30-22:30"
          ></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="状态" prop="name">
        <el-select v-model="goodFrom.storeStatus" placeholder="请选择状态">
          <el-option label="未打烊" value="0"></el-option>
          <el-option label="打烊" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否支持预约" prop="name">
        <el-select v-model="goodFrom.supportOrder" placeholder="请选择">
          <el-option label="支持" value="1"></el-option>
          <el-option label="不支持" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="门店类型 " prop="name">
        <el-select v-model="goodFrom.storeType" placeholder="请选择类型">
          <el-option label="艾灸院" value="1"></el-option>
          <el-option label="普通门店" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="门店描述" prop="name">
        <el-col :span="5">
          <el-input
            type="textarea"
            v-model="goodFrom.storeDescription"
            placeholder="请输入门店描述"
          ></el-input>
        </el-col>
      </el-form-item>
      <!-- <el-form-item label="产品分类" prop="region">
        <el-select v-model="goodFrom.region" placeholder="请选择产品分类">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="轮播图" prop="region">
                <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="宣传图" prop="region">
                <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item> -->
      <el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          @click="submitForm('goodFrom')"
          >立即修改</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ["id"],
  data() {
    let letterRule = (rule, value, callback) => {
      let reg = /^[a-zA-Z0-9_-]{4,18}$/;
      if (value === "") {
        callback(new Error("输入内容不能为空"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入字母、数字、下划线"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      goodFrom: {
        storeName: "",
        storeImage: "",
        storePhone: "",
        storeAddress: "",
        storeLng: "",
        storeLat: "",
        busineHours: "",
        supportOrder: "1",
        storeStatus: "1",
        storeType: "2",
        storeDescription: "",
      },
      ruleGood: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        gander: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        avatarUrl: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        account: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        nikeName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        status: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        level: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
      },
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [],
    };
  },
  async created() {
    this.initData();
  },
  methods: {
    async initData() {
      console.log(this.id);
      let res = await this.http.get("/store/getById?id=" + this.id);
      if (!res.error) {
        this.goodFrom = !res.error ? res.result : {};
        this.goodFrom.storeType = this.goodFrom.storeType.toString();
        this.goodFrom.storeStatus = this.goodFrom.storeStatus.toString();
        this.goodFrom.supportOrder = this.goodFrom.supportOrder ? "1" : "0";
        if (res.result.storeImage) {
          this.fileList.push({
            url: res.result.storeImage,
          });
        }
      } else
        this.eui.Message({
          message: `获取id为：'${this.id}'的用户信息失败`,
          type: "error",
        });
      console.log(this.goodFrom);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          this.loading = true;
          this.updateuser(this.goodFrom);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async updateuser(req) {
      req.storeType = parseInt(req.storeType);
      req.storeStatus = parseInt(req.storeStatus);
      req.supportOrder = parseInt(req.supportOrder);
      let type = "success",
        rmsg;
      let res = await this.http.post("/store/update", req);
      if (!res.error) {
        (type = "success"), (rmsg = "修改成功"), this.initData();
      } else {
        (type = "error"), (rmsg = "修改失败");
      }
      this.eui.Message({
        message: rmsg,
        type: type,
        duration: 5 * 1000,
      });
      this.loading = false;
    },
    handleRemove(file, fileList) {
      this.goodFrom.storeImage = "";
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true;
    },
    uploadSuccess(response, file, fileList) {
      this.goodFrom.storeImage = response.result[0];
    },
    dealFileList(fileList) {},
    message(msg, type) {
      this.eui.Message({
        message: "超出上传个数",
        type: "error",
      });
    },
  },
};
</script>

<style scoped>
.FromGood {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
</style>